<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button @click="handleFlow">
          <i class="fa fa-sitemap"></i>
          审批流程
        </el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleEdit()">保证金</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <bond-edit
      :visible.sync="editVisible"
      :table-id="editId"
      :query-id="queryId"
      @success="getData()"
    ></bond-edit>

    <el-dialog :visible.sync="viewVisible" top="30px" width="1000px">
      <bond-view :view-mode="true" :query-id="viewQueryId" :table-id="viewId"></bond-view>
    </el-dialog>

    <list-dialog
      :visible.sync="listVisible"
      :query-id="listId"
      :table-id="registerId"
    ></list-dialog>

    <flow-dialog
      title="保证金审批流程"
      :visible.sync="flowVisible"
      flow-key="BOND_APPROVAL"
    ></flow-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BondEdit from '@/credit/views/county/settle/bond/component/register/MainDialog'
import BondView from '@/credit/views/county/settle/bond/component/register/Main'
import ListDialog from '@/credit/views/county/settle/bond/component/refund/ListDialog'
import FlowDialog from '@/credit/components/flow/ViewDialog'
import { getFollow } from '@/credit/mixin/taskTableCountyUnionProvince'
export default {
  components: {
    BondEdit,
    BondView,
    ListDialog,
    FlowDialog,
  },
  props: {},
  data() {
    return {
      tableName: 'bond_register_view',
      params: {
        index: 1,
        size: 10,
      },
      tableData: [],
      totalCount: 0,
      order: {},
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '110px' } },
        { attrs: { label: '缴费时间', prop: 'bond_time', align: 'center', width: '100px' } },
        { attrs: { label: '保证金比例(%)', prop: 'bond_rate', align: 'center' } },
        { attrs: { label: '保证金(万元)', prop: 'bond_funds', align: 'center' } },
        {
          attrs: { label: '登记时间', prop: 'create_time', width: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd hh:mm'),
        },
        {
          attrs: { label: '退费金额(万元)', prop: 'back_funds', align: 'center' },
        },
        {
          attrs: { label: '待审核人员', prop: 'itemStatusLabel', align: 'center' },
        },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            {
              content: '审核',
              icon: 'fa fa-legal',
              event: this.handleEdit,
              ifRender: row => row.editEnable,
            },
            {
              content: '退费',
              icon: 'fa fa-cny',
              event: this.handleReFunds,
              ifRender: row => +(row.approval_status || '') === 2,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      loading: false,
      editVisible: false,
      queryId: '',
      editId: '',
      viewVisible: false,
      viewId: '',
      viewQueryId: '',
      listVisible: false,
      listId: '',
      registerId: '',

      flowVisible: false,
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleFlow() {
      this.flowVisible = true
    },
    handleReFunds(row = {}) {
      this.listVisible = true
      this.registerId = row?.bond_register_id ?? ''
      this.listId = row?.customer_related_id ?? ''
    },
    handleView(row = {}) {
      this.viewQueryId = row?.customer_related_id ?? ''
      this.viewId = row?.bond_register_id ?? ''
      this.viewVisible = true
    },
    handleEdit(row = {}) {
      this.queryId = row?.customer_related_id ?? ''
      this.editId = row?.bond_register_id ?? ''
      this.editVisible = true
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data?.data ?? []).map(item => {
            item.itemStatusLabel = ''
            return item
          })
          this.totalCount = data?.totalCount ?? 0
          return getFollow(
            (data?.data ?? []).map(item => {
              return {
                customer_related_id: item.bond_register_id,
              }
            }),
            'BOND_APPROVAL'
          )
        })
        .then(record => {
          this.tableData = this.tableData.map(it => {
            const data = record.find(item => item.wf_related_id === it.bond_register_id) || {}
            it.editEnable = data.task_person?.includes(this.userId) ?? false
            it.itemStatusLabel = data.innerFollow || ''
            return it
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
